import { useEffect, useState } from "react";
import { useStore } from "@/store";
import { useLocation } from "react-router-dom";
import { EditOutlined } from "@ant-design/icons";
import { Modal, Input, message, Select } from "antd";
import { nanoid } from "nanoid";

import SlideTop from "./components/SlideTop";
import SlideContent from "./components/SlideContent";
import SlideList from "./components/SlideList";

const SlideDetail = () => {
  const {
    sildeFatherId,
    slideFatnerList,
    slideList,
    currentSlideIndex,
    slideTitle,
    slideImage,
    updateSlideTitle,
    updateSlide,
    setCurrentPresentation,
    updateAnyData,
  } = useStore();
  const [selectValue, setSelectValue] = useState("color");
  const [backgroundVal, setbackgroundVal] = useState("");
  const [backgroundVal2, setbackgroundVal2] = useState("");
  const [modalVisible, setModalVisible] = useState(false);
  const [inputValue, setInputValue] = useState("");
  const [inputValue2, setInputValue2] = useState("");
  const { search, pathname } = useLocation();
  // 创建一个URLSearchParams对象
  const params = new URLSearchParams(search);
  // 获取title和id的值
  const query = {
    title: params?.get("title") || "",
    id: params?.get("id") || "",
  };
  // const { query } = useLocation();

  useEffect(() => {
    if (query && query.title) {
      updateSlideTitle(query.title);
    }
    //  有id说明是编辑，需要找到一个index的item然后更新
    if (query && query.id) {
      const itemFlag = slideFatnerList.find(
        (item: any) => item.id === query.id
      );
      if (itemFlag) {
        updateSlideTitle(itemFlag?.slideTitle);
        setCurrentPresentation(1);
        updateAnyData({
          sildeFatherId: query.id,
          sildeBgType: itemFlag?.sildeBgType,
          sildeBgVal: itemFlag?.sildeBgVal,
          sildeBgVal2: itemFlag?.sildeBgVal2,
        });
        updateSlide(itemFlag.slideList);
      }
    } else {
      // 如没有id，说明是新建，
      // 1、需要初始化我们slideList
      // 2、需要更新当前索引为0
      setCurrentPresentation(1);
      updateSlide([
        {
          sortId: 1,
          id: nanoid(),
          elements: [],
        },
      ]);
    }
  }, []);

  const handleCancel = () => {
    setModalVisible(false);
    setInputValue("");
    setInputValue2("");
  };

  const handleOK = () => {
    if (!inputValue) {
      message.error("请输入幻灯片标题");
      return;
    }
    // if (selectValue === "color" && !backgroundVal) {
    //   message.error("请设置背景颜色");
    //   return;
    // }
    // if (selectValue === "gradient" && (!backgroundVal || !backgroundVal2)) {
    //   message.error("请设置背景渐变颜色");
    //   return;
    // }
    // if (selectValue === "img" && !backgroundVal) {
    //   message.error("请设置背景图片");
    //   return;
    // }
    setModalVisible(false);
    updateAnyData({
      slideTitle: inputValue,
      slideImage: inputValue2,
      sildeBgType: selectValue,
      sildeBgVal: backgroundVal,
      sildeBgVal2: backgroundVal2,
    });
    handleCancel();
  };

  return (
    <div
      style={{
        display: "flex",
        width: "100%",
        height: "100%",
        overflow: "hidden",
        background: "#f3f4f6",
      }}
    >
      <div
        style={{
          width: 300,
          height: "100%",
          background: "#ffffff",
          borderRight: "1px solid #e8e8e8",
        }}
      >
        <div
          style={{
            position: "relative",
            width: "100%",
            height: 62,
            padding: "16px",
            overflow: "hidden",
            fontWeight: 600,
            fontSize: 18,
            whiteSpace: "nowrap",
            textOverflow: "ellipsis",
            borderBottom: "1px solid #e8e8e8",
          }}
          onClick={() => {
            setInputValue(slideTitle);
            setInputValue2(slideImage);
            setModalVisible(true);
          }}
        >
          <EditOutlined
            onClick={() => {}}
            style={{
              fontSize: 14,
              marginLeft: 8,
              cursor: "pointer",
              position: "absolute",
              right: 8,
              top: 24,
            }}
          />
          {slideTitle}
        </div>
        {/* 根据幻灯片--自动scar--缩放大小 */}
        <div
          style={{
            width: "100%",
            height: "100%",
            padding: "16px",
            overflowY: "auto",
          }}
        >
          <SlideList />
        </div>
      </div>
      <div
        style={{
          flex: 1,
          width: "calc(100% - 200px)",
          height: "100%",
        }}
      >
        <SlideTop />
        <SlideContent />
      </div>

      <Modal
        width={400}
        title="设置幻灯片"
        open={modalVisible}
        onCancel={handleCancel}
        onOk={handleOK}
        okText="修改"
        cancelText="取消"
      >
        <div>
          <>
            标题：
            <Input
              value={inputValue}
              onChange={(e) => setInputValue(e.target.value)}
            />
          </>
          <div>
            缩略图URl：
            <Input
              value={inputValue2}
              onChange={(e) => setInputValue2(e.target.value)}
            />
          </div>
          {/* <div>
            背景设置：
            <Select
              style={{ width: "100%" }}
              value={selectValue}
              onChange={(e) => setSelectValue(e)}
              options={[
                { label: "颜色", value: "color" },
                { label: "渐变", value: "gradient" },
                { label: "图像", value: "img" },
              ]}
            />
          </div>
          {selectValue === "color" ? (
            <>
              设置颜色：（例如:#000000）
              <Input
                value={backgroundVal}
                onChange={(e) => setbackgroundVal(e.target.value)}
              />
            </>
          ) : null}
          {selectValue === "gradient" ? (
            <>
              设置渐变色：（例如:#000000）
              <div style={{ display: "flex" }}>
                <Input
                  style={{ width: 100 }}
                  value={backgroundVal}
                  onChange={(e) => setbackgroundVal(e.target.value)}
                />
                到
                <Input
                  style={{ width: 100 }}
                  value={backgroundVal2}
                  onChange={(e) => setbackgroundVal2(e.target.value)}
                />
              </div>
            </>
          ) : null}
          {selectValue === "img" ? (
            <>
              设置图像地址：
              <Input
                value={backgroundVal}
                onChange={(e) => setbackgroundVal(e.target.value)}
              />
            </>
          ) : null} */}
        </div>
      </Modal>
    </div>
  );
};

export default SlideDetail;
